<!-- PortOperationsContent.vue -->
<template>
  <div class="port-operations-content">
    <!-- 子标签页 -->
    <div class="sub-tabs">
      <span
          v-for="(tab, index) in subTabs"
          :key="index"
          :class="{ 'active': activeSubTab === tab }"
          @click="setActiveSubTab(tab)"
      >
        {{ tab }}
      </span>
    </div>

    <!-- 子标签页内容 -->
    <component :is="currentSubComponent"></component>
  </div>
</template>

<script>
import CustomsAirFreightContent from './CustomsAirFreightContent.vue'
import CustomsFCLFreightContent from './CustomsFCLFreightContent.vue'
import CustomsLCLFreightContent from './CustomsLCLFreightContent.vue'
import CustomsPortChargesContent from './CustomsPortChargesContent.vue'


export default {
  name: 'PortOperationsContent',
  components: {
    CustomsAirFreightContent,
    CustomsFCLFreightContent,
    CustomsLCLFreightContent,
    CustomsPortChargesContent,

  },
  data() {
    return {
      activeSubTab: '空运运费',
      subTabs: ['空运运费', 'FCL 运费', 'LCL/FTL/TL 费用', '起运港费用', '目的港费用'],
    }
  },
  computed: {
    currentSubComponent() {
      switch(this.activeSubTab) {
        case '空运运费': return 'CustomsAirFreightContent'
        case 'FCL 运费': return 'CustomsFCLFreightContent'
        case 'LCL/FTL/TL 费用': return 'CustomsLCLFreightContent'
        case '起运港费用': return 'CustomsPortChargesContent'
        case '目的港费用': return 'CustomsPortChargesContent'
        default: return null
      }
    }
  },
  methods: {
    setActiveSubTab(tab) {
      this.activeSubTab = tab
    }
  }
}
</script>

<style scoped>
.port-operations-content {
  font-family: Arial, sans-serif;
}

.sub-tabs {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.sub-tabs span {
  padding: 10px 15px;
  cursor: pointer;
}

.sub-tabs span.active {
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
}
</style>
